<script lang="ts" setup>
import { PropType } from 'vue'
import { Command } from '@/commands/command.ts'

const props = defineProps({
    command: { required: true, type: Object as PropType<Command> },
})
</script>

<template>
    <n-space :wrap="false" :wrap-item="false" align="center" class="command-name" justify="end">
        <div class="session-message user-message">{{ 'ai' !== props.command!.name ? props.command.args : props.command!.args.split(' ').slice(1).join(' ') }}</div>
    </n-space>
</template>

<style lang="scss" scoped>
@import '@/assets/scss/variables';

.command-name {
    font-family: monospace;
    font-size: 14px;
    line-height: 1.8;
}

.user-message {
    background-color: #f8f9f9;
}
</style>
